<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <!-- 引入 echarts.js -->
        <script type="text/javascript" src="echarts.min.js"></script>
<!--        <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>-->
    </head>
    <body style="height: 100%; margin: 0">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="container" style="height: 100%"></div>
        <script type="text/javascript">
            var dom = document.getElementById("container");
            
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(dom);
            var option = {
                title: {
                    textStyle: {
                        fontSize : 30,
                        color: '#000000'
                    },
                    color: '#000000',
                    left: 'center',
                    top: "center"
                },
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        fontSize: 30
                    },
                    formatter: '{a}<br />{b} {d}%'
                },
                legend: {
                    show:false,
                    orient: 'vertical',
                    left: 'left',
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        backgroundColor : '#EEEFFD',
                        borderRadius : 20,
                        fontSize : '30',
                        color: '#000000',
                        align : 'center',
                        padding: [5, 15, 5, 15]
                    }
                }]
            };
            
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

            function reloadData(JSONString) {
                var obj = JSON.parse(JSONString)
                myChart.setOption({
                    title: {
                        text: obj.text
                    },
                    series: {
                        name: obj.name,
                        data: obj.data,
                        color: obj.color
                    }
                })
            }
        </script>
    </body>
</html>
    
